﻿<html>
<head>
	<title></title>
	<meta charset='utf-8'> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-responsive.min.css">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function () {
			var Start = 0;
			if (Start == 0) {
				var htmltext = "<iframe width = '100%' height = '80%' src='graph/transmission/dropDownList.php'></iframe>"
				$('#dropdown').html(htmltext);
				Start = 1;
			};
			$("#btn_1").click(function() { 
				var htmltext = "<iframe width = '100%' height = '80%'; src='graph/transmission/dropDownList.php'></iframe>"
				$('#dropdown').html(htmltext);
			})
			$("#btn_2").click(function() { 
				var htmltext = "<iframe width = '100%' height = '80%'; src='graph/watermain/dropDownList.php'></iframe>"
				$('#dropdown').html(htmltext);
			})
			$("#btn_3").click(function() { 
				var htmltext = "<iframe width = '100%' height = '80%'; src='graph/dis_pipe/dropDownList.php'></iframe>"
				$('#dropdown').html(htmltext);
			})
			$("#btn_4").click(function() { 
				var htmltext = "<iframe width = '100%' height = '80%'; src='graph/valve/dropDownList.php'></iframe>"
				$('#dropdown').html(htmltext);
			})
			$("#btn_5").click(function() { 
				var htmltext = "<iframe width = '100%' height = '80%'; src='graph/hydrant/dropDownList.php'></iframe>"
				$('#dropdown').html(htmltext);
			})
			$("#btn_6").click(function() { 
				var htmltext = "<iframe width = '100%' height = '80%'; src='graph/watermain_leak/dropDownList.php'></iframe>"
				$('#dropdown').html(htmltext);
			})
		});	
	</script>
	<style type="text/css">
		a{
			font-size: 12px;
		}
		body{
			background: #daf4f9;
		}
	</style>
</head>
<body>
	<div class="container well">
		
		<div class="navbar navbar-static-top">
		  <div class="navbar-inner">
		    <a class="brand" href="#">Graph</a>
		    <ul class="nav nav-tabs">
		      <li><a id="btn_1" href="#">ความยาวท่อส่งน้ำ</a></li>
		      <li><a id="btn_2" href="#">ความยาวท่อประธาน</a></li>
		      <li><a id="btn_3" href="#">ความยาวท่อจ่ายน้ำ</a></li>
		      <li><a id="btn_4" href="#">จำนวนประตูน้ำ</a></li>
		      <li><a id="btn_5" href="#">จำนวนหัวดับเพลิง</a></li>
		      <li><a id="btn_6" href="#">จุดแตกรั่วของท่อประธาน</a></li>
		    </ul>
		  </div>
		</div>
		<div class="row">
			<div class="span12">
				<div id="dropdown"></div>
			</div>
		</div>
	</div>
</body>
</html>